<template>
    <div class="sharing-delist">
        <p>评论详情</p>
        <div class="content-list clearfix active">
            <div class="img-box clearfix" style="float: left" v-if="picArray.length >= 2">
                <div class="content-list-img">
                    <img :src="$Url+picArray[0]" alt="">
                    <p>before</p>
                </div>
                <div class="content-list-img">
                    <img :src="$Url+picArray[1]" alt="">
                    <p>after</p>
                </div>
            </div>
            <div class="content-list-text clearfix">
                <h1>
                    <span class="title" >{{data.name}}</span>
                    <!--<span class="rate">评价<Rate disabled v-model="data.satisfied" /></span>-->
                </h1>
                <p class="desc" >
                    {{data.content}}
                    <span >查看详情</span>
                </p>
                <div class="content-list-ues" >
                    <div class="content-list-uesImg">
                        <p>

                            <span >
                               提醒:该日记被会员多次转载,请继续努力
                            </span>
                        </p>
                    </div>
                    <div class="content-list-zan">
                        <div class="content-list-icon" style="width: 250px;text-align: center;"><span style="color: #FE5371">查看日记原内容</span></div>

                        <div class="content-list-icon time">{{data.time}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="box">

        </div>
    </div>
</template>

<script>
    export default {
        name: "SharingDelist",
        data () {
            return {
                list: [],
                animal: '全部',
                id:'',
                data:[],
                picArr:'',
                group:'',
            }
        },
        created () {
            this.getinfo()
        },
        computed: {
            picArray() {
                return this.picArr.split(',')
            }
        },
        methods:{
            getinfo () {
                this.id = this.$route.query.id
                let _this = this
                _this.$post('/api/Diary/DiaryInfo',
                    {
                        diary_id:_this.id,
                    },function (res) {
                        _this.data = res.data
                        _this.picArr = res.data.images
                        _this.list = res.data.evaluate
                    },function (err,errmsg) {
                        _this.$message.error(errmsg);

                    }
                )
            }
        }
    }
</script>

<style scoped lang="less">
    @import "../../../style/style";
    .sharing-delist{
        width: 700px;
        /*height: 1612px;*/
        background-color: #ffffff;
        border: solid 1px #e0e0e0;
        padding: 20px !important;
    >:first-child{
        color: @theme-color-dark;
        font-size: 18px;
        border-bottom: 2px solid @theme-color-dark;
    }
    .box{
    .box-title{
        padding:15px 20px;
        background-color: #fafafa;
        border: solid 1px #f0f0f0;
    .ivu-radio-wrapper{
        margin-left: 20px;
    }
    >span{
        float: right;
        padding: 9px 12px;
        background-color: white;
        border: 1px solid #e0e0e0;
        margin-top: -10px;
    }
    }
    }

    .active{
        border-bottom: 1px  dashed  @theme-color-dark;
    }
    .content-list{
        border-bottom: 1px  solid #e4e4e4;
        padding: 21px 0 21px 0;

    .one-img{
        width: 128px;
        height: 150px;
        float: left;
    img{
        width: 100%;
        height:100%;
        border-radius: 5px;
    }
    }
    .content-list-img{
        float: left;
        margin-right: 5px;
        width: 128px;
        height: 128px;
        position: relative;
    img{
        width: 100%;
        height: 100%;
        border-radius: 5px;
    }
    p{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        z-index: 1;
        color: #ffff;
        text-align: center;
        height: 22px;
        line-height: 22px;
        background-color: rgba(0,0,0,0.4);
        border-radius: 0 0 5px 5px;
    }
    }
    .content-list-text{
        width: 370px;
        float: left;
        height: 100%;
        margin-left: 15px;
    h1{
        font-size: 15px;
        color: #333333;
        font-weight: normal;
        padding-bottom: 4px;
    .title {
        display: inline-block;
        width: 218px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .rate{
        font-size: 12px;
        float: right;
        margin-top: -1px;
    }
    .ivu-rate-star{
        margin-right: 0 !important;
        font-size: 15px;
    }
    .ivu-rate{
        margin-top: -4px;
    }
    }
    .desc{
        width: 100%;
        font-size: 12px;
        color: #777777;
        letter-spacing: 0;
        text-align: justify;
        padding-bottom:8px;
        height: 55px;
        line-height: 1.4;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    span{
        color: @theme-color-dark;
    }
    }
    }
    .content-list-ues{
        min-height: 30px;
    .content-list-uesImg{
        width: 100%;
    .icon{
        font-size: 18px;
    }
    p{
        width: 100%;
        font-size: 14px;
        color: @theme-color-dark;
        padding-right: 10px;
        float: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    }
    .content-list-zan{
        height: 30px;
    .content-list-icon{
        width: 70px;
        height: 30px;
        line-height: 30px;
        float: left;
        margin-right: 15px;
    span{
        padding-left: 8px;
        color: #999999;
    }
    }
    .icom{
        margin-top: -4px;
    }
    .icon{
        color: #999999;
    }
    .time{
        float: right;
        color: #999999;
    }
    }
    }
    }
    .btn-box {
        text-align: right;
    .btn {
        display: inline-block;
        color: @theme-color;
        border: 1px solid @theme-color;
        font-size: 14px;
        height: 28px;
        line-height: 28px;
        padding: 0 18px;
        margin-right: 14px;
        border-radius: 4px;
        cursor: pointer;
        position: relative;
    }
    .active {
    &:after {
         content: '';
         display: inline-block;
         border: 1px solid @theme-color;
         width: 8px;
         height: 8px;
         position: absolute;
         bottom: -10px;
         left: 28px;
         background: #fff;
         border-right-color: transparent;
         border-bottom-color: transparent;
         transform:rotate(45deg);
         -ms-transform:rotate(45deg); 	/* IE 9 */
         -moz-transform:rotate(45deg); 	/* Firefox */
         -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
         -o-transform:rotate(45deg);
     }
    }
    }
    .reason-box {
        padding: 5px 10px 10px;
        float: left;
        width: 100%;
    .reason {
        padding: 10px;
        border: 1px solid @theme-color;
    }
    }
    }
    .content-list:hover{
        border-bottom: 1px  solid #ff82a4;
        background-color: #f8f8f8;
    }
    .content-list:hover .content-list-img p{
        background-color: rgba(255,91,154,0.4);
    }

</style>